<!DOCTYPE html>
<html lang="en">

<head>
    <title> 自转球体 </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 3D 库 -->
    <script src="../库/babylon.max.js"></script>
    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
    <script>
        var $ = {};
        // 元素创建代码
        var element = function (scene) {
            //-> 资料参考: https://doc.babylonjs.com/how_to/pivot
            // 创建个球体
            var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 20 }, scene);
            sphere.position.y = 10;
            // 创建材质
            var mat = new BABYLON.StandardMaterial("mat", scene);
            mat.backFaceCulling = false;
            mat.useLogarithmicDepth = true;
            // 创建贴图
            var textmat = new BABYLON.Texture("./素材/00000793.png")
            textmat.hasAlpha = true;
            mat.ambientTexture = textmat;
            // 设置材质
            sphere.material = mat;
            // 设置旋转信息
            //-> 旋转中心点
            var axis = new BABYLON.Vector3(0, 10, 0);
            //-> 旋转角度(累加)
            var angle = 0.02;
            // 帧注册
            scene.registerAfterRender(function () {
                sphere.rotate(axis, angle,
                    BABYLON.Space.WORLD // 世界坐标系
                );
            });

        }
        // 测试代码
        window.addEventListener('DOMContentLoaded', function () {
            // 获得元素
            var canvas = document.getElementById('renderCanvas');
            // 创建渲染
            var engine = new BABYLON.Engine(canvas, true);
            // 隔离创建
            var scene = (function () {
                // 创建一个基本的Scene对象，用来容纳所有其他对象
                var scene = new BABYLON.Scene(engine);
                // 创建一个相机，设置其位置为
                var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 20, -10), scene);
                // 相机聚焦在场景原点位置
                camera.setTarget(BABYLON.Vector3.Zero());
                // 使得我们可以控制相机拍摄角度，和three.js中的OrbitsControl效果类似，但简单得多
                camera.attachControl(canvas, false);
                camera.position.y = 10;
                camera.position.z = -40;
                camera.rotation.x = -0.1;
                camera.rotation.y = 0;
                // 创建模型
                element(scene)
                // 返回 Scene对象一个半球形光源,朝向为天空
                var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
                return scene;
            })();
            // 循环渲染
            engine.runRenderLoop(function () {
                scene.render();
            });
            //追加事件：帆布与大小调整程序
            window.addEventListener('resize', function () {
                engine.resize();
            });
        });
    </script>
</head>

<body>
    <canvas id="renderCanvas"></canvas>
</body>

</html>